<template>
  <!-- <div class='container'>题组列表</div> -->
  <div class="container">
    <el-card style="margin:10px">
      <el-row type="flex" justify="space-between">
        <el-col :span="20">
          <!-- <div style="color: #606266; fontSize: 14px; fontWeight: bold;">
            <span style="margin:20px">关键字 </span>
            <el-input
              v-model="input"
              placeholder="根据编号搜索"
              style="width:280px"
              size="small"
            />
          </div> -->

          <el-form label-width="80px" inline size="small">
            <el-form-item label="关键字">
              <el-input
                v-model="keyword"
                placeholder="根据编号搜索"
                style="width:230px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-button @click="onCancel" size="small">清除</el-button>
          <el-button type="primary" size="small" @click="search"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
        <!-- <el-col :span="24">
          <div style=" backgroundColor: #f4f4f5;">
            <i class="el-icon-info" style=" color: #909399; margin:10px;"></i>
            <span style="color: #909399; fontSize: 13px">数据一共178条</span>
          </div>
        </el-col> -->
      </el-row>

      <template>
        <el-table style="width: 100%; margin-top:15px;" :data="tableData">
          <el-table-column label="编号" width="200" prop="id" />
          <!-- prop="questionType" label="题型"  -->
          <!-- <el-table-column width="80" label="题型" prop="questionType" > -->
          <el-table-column
            width="60"
            label="题型"
            prop="questionType"
            :formatter="formatQuestionType"
          />

          <el-table-column label="题目编号" prop="questionIDs" width="200">
            <template slot-scope="{ row }">
              <div
                v-for="(item, index) in row.questionIDs"
                :key="index"
                style="color:#0099ff"
                @click="detail(item)"
              >
                {{ item.number }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="录入时间" prop="addTime" /> -->
           <el-table-column label="录入时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.addTime | parseTimeByString }}
          </template>
        </el-table-column>
          <el-table-column label="答题时间(s)" prop="totalSeconds" />
          <el-table-column label="正确率(%)" prop="accuracyRate" />
          <el-table-column label="录入人" prop="userName" />
          <el-table-column label="操作" prop="data" width="100">
            <!-- <template slot-scope="{ row }">
              <el-button
                type="text"
                class="el-button el-button--danger el-button--small is-plain is-circle"
                title="删除"
                icon="el-icon-delete"
                @click="onCancel(row)"
               /> 
             </template>  -->
            <template slot-scope="{ row }">
              <el-button
                icon="el-icon-delete"
                circle
                @click="onCancelBtn(row)"
                class="el-button el-button--danger el-button--small is-plain is-circle"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="10"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top:15px; margin-bottom:15px; float: right"
        background
      >
      </el-pagination>
    </el-card>
    <!-- 放置题目编号弹层 -->
    <!-- <add-randoms type="text" @click="dialogVisible = true" /> -->
    <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" @close="btnOK" width="70%" >
    <!-- <el-dialog title="题目预览" @click ="closs" width="70%" > -->
      <!-- 弹层里面的内容 -->
      <el-row
        :gutter="20"
        type="flex"
        justify="space-between"
        style="margin-bottom:20px"
      >
        <el-col :span="6"
          ><div>
            【题型】 : {{ formatQuestionTypes(typeData.questionType) }}
          </div>
        </el-col>
        <el-col :span="6"
          ><div>【编号】 : {{ typeData.id }}</div></el-col
        >
        <el-col :span="6"
          ><div>
            【难度】 : {{ formatDifficulty(typeData.difficulty) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div>【标签】 : {{ typeData.tags }}</div></el-col
        >
      </el-row>
      <el-row
        :gutter="20"
        type="flex"
        justify="space-between"
        style="margin-bottom:20px"
      >
        <el-col :span="6"
          ><div>【学科】 : {{ typeData.subjectName }}</div></el-col
        >
        <el-col :span="6"
          ><div>【目录】 : {{ typeData.directoryName }}</div></el-col
        >
        <el-col :span="6"
          ><div>【方向】 : {{ typeData.direction }}</div></el-col
        >
        <el-col :span="6"><div></div></el-col>
      </el-row>
      <hr />

      <el-row style="margin-bottom:15px">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">【题干】 :</div>
        </el-col>
        <el-col>
          <span style="color:#0000ff" v-html="typeData.question"></span
        ></el-col>
        <el-col
          >{{
            formatQuestionTypes(typeData.questionType)
          }}题选项：（以下选中的选项为正确答案），</el-col
        >
        <!-- 单选 -->
        <el-col v-if="typeData.questionType == 1">
         <el-row>
          <!-- 循环数组 -->
          <el-col v-for="item in typeData.options" :key="item.id" >
            <el-radio :value="checked" :label="item.isRight" >
              {{item.title}}
            </el-radio>
          </el-col>
         </el-row>
        </el-col>
        <!-- 多选 -->
        <el-col v-else>
          <el-row>
            <el-col v-for="item in typeData.options" :key="item.id" >
              <el-checkbox :label="item.isRight" :checked="item.isRight === 1" >{{item.title}}</el-checkbox>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <hr />
      <el-row>
        <el-col :span="24" style="margin-bottom:15px">
          <div class="grid-content bg-purple-dark">
            【参考答案】 :
            <el-button
              type="danger"
              @click="$event => showVideo = !showVideo" 
              >视频答案预览</el-button
            >
          </div>
        </el-col>
        <!-- 视频播放 -->
        <el-col v-if="showVideo">
          <video :src="typeData.videoURL" width="320" height="240" preload="none" controls="controls" ></video>
        </el-col>
      </el-row>
      <hr />
      <!-- <el-row>
        <el-col :span="24" style="margin-bottom:15px">
          【答案解析】 : {{typeData.answer}}
        </el-col>
        <el-col> </el-col>
      </el-row> -->
      <!-- 修改后的 -->
      【答案解析】：<div style="display:inline-block" v-html="typeData.answer"></div>
      <hr />
      <el-row>
        <el-col :span="24" style="margin-bottom:15px">
          <div class="grid-content bg-purple-dark">
            【题目备注】 : {{ typeData.remarks }}
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="btnOK" 
          >确 定</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// as 取别名  removeRandoms  删除接口
import {
  randoms as getRandoms,
  removeRandoms,
  detail
} from "@/api/hmmm/questions.js";
import { questionType, difficulty } from "@/api/hmmm/constants.js";
export default {
  data() {
    return {
      dialogVisible: false,
      keyword: "",
      pages: {
        page: 1,
        pagesize: 10
      },
      // 组题列表
      tableData: [
        {
          id: "", //编号
          questionType: "", //题型
          questionIDs: "", //题目编号
          addtTime: "", // 录入时间
          totalSeconds: "", //答题时间
          accuracyRate: "", //正确率
          userName: "" //录入人
        }
      ],
      typeData: [],
      currentPage2: 1,
      total: null, //总条数
      checked: 1, //单选固定项目
      showVideo: false,
    
      
    };
  },
  created() {
    this.getRandoms(this.pages);
    // this.list(this.pages),
    //  this.detail(item)
  },
  methods: {
    formatQuestionType(row, column, cellvalue, index) {
        const obj = questionType.find(item => item.value == cellvalue);
        return obj ? obj.label : "";
      },
      // 封装题型
      formatQuestionTypes(value) {
        const obj = questionType.find(item => item.value == value);
        return obj ? obj.label : "未知";
      },
      // 封装难度
      formatDifficulty(value) {
        const obj = difficulty.find(item => item.value == value);
        return obj ? obj.label : "未知";
      },
    // 获取组题列表数据 
    async getRandoms() {
      // api 目录中的函数和接口和数据相关，api函数是以对象的方式传对象
      const { data } = await getRandoms(this.pages);
      this.tableData = data.items;
      this.total = data.counts;
      console.log(this.tableData, "22");
      // console.log(data, "11");
    },
    // // 获取基础题库详情
    async detail(item) {
      // console.log(this.pages);
      const { data } = await detail(item);
      console.log(item, "cc");
      this.typeData = data;
      this.dialogVisible = true;
      console.log(this.typeData, "999");
    },
    //获取题库列表
    // async list() {
    // const {data} = await list(this.pages)
    // this.typeData = data
    // console.log(this.typeData, '44')
    // },

    // 删除按钮
    async onCancelBtn(id) {
      await this.$confirm("此操作将永久删除该题组， 是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButttonText: "取消",
        type: "warning"
      });
      await removeRandoms(id);
      console.log(id, "bb");
      this.$message.success("删除成功");
      this.getRandoms();
    },
    //清除按钮
    onCancel() {
      this.keyword = "";
      this.getRandoms(this.pages);
    },
    // 搜索
    async search() {
      //此业务中关键字是双向绑定的 如果其他页面有需要改动的参数在搜索前修改即可
      const { data } = await getRandoms({
        ...this.pages,
        keyword: this.keyword
      });
      this.tableData = data.items;
      console.log(this.tableData, "88"); //数据渲染不上
      this.total = data.counts;
      console.log(this.total, "66");
    },
    //尺码
    handleSizeChange(newSize) {
      this.pages.page = 1
      this.pages.pagesize = newSize;
      this.getRandoms({ page: this.pages.page, pagesize: pagesize });
      console.log(`每页 ${newSize} 条`);
    },
    //分页
    handleCurrentChange(newPage) {
      this.pages.page = newPage; //新的页码
      this.getRandoms({ page: newPage, pagesize: this.pages.pagesize });
      console.log(`当前页: ${newPage}`);
    },
    btnOK(){
      this.dialogVisible = false
      this.showVideo = false
    },
    // onClose(){
    //   // this.dialogVisible = false
    //   this.showVideo = false

    // }
  }
};
</script>

<style scoped lang="scss">
.el-button--small .is-circle {
  padding: 9px;
}
.el-button--danger .is-plain {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.el-button .is-circle {
  border-radius: 50%;
}
</style>
